{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

    <meta charset="utf-8">
    <title>Fullscreen Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/supersized.css' %}">
    <link rel="stylesheet" href="{% static 'css/style-forget.css' %}">

    <style>
        body {
            width: 100%;
            height: 100%;
            background: url({% static 'images/backgrounds/t.jpg' %}) no-repeat fixed;
            background-size: 100% 100%;
        }
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>

<div class="page-container" style="margin-top: 60px;">
    <div style="margin-bottom: 60px;">
        <img src="assets/img/tim.jpeg" alt="" style="width: 100px;height: 100px;">
        <h1>Python实战派</h1>
    </div>
    <br>
    <div id="pwd-content">
        <h1>重置密码</h1>
        <form method="post" id="reset_pwd_form">
            <div>
                <input type="password" name="password1" class="password1" placeholder="密码">
            </div>
            <div>
                <input type="password" name="password2" class="password2" placeholder="确认密码">
            </div>
            <div>
                <input type="text" name="email" class="email" placeholder="邮箱">
            </div>

            <button type="button" id="resetPwdBtn">提交</button>
            {% csrf_token %}
        </form>
    </div>
</div>

<!-- Javascript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/supersized.3.2.7.min.js' %}"></script>
<script src="{% static 'js/supersized-init.js' %}"></script>
<script src="{% static 'js/scripts.js' %}"></script>

<script>
    $(function () {
        $('#resetPwdBtn').on('click', function () {
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'reset_password' %}",
                data: $('#reset_pwd_form').serialize(),
                async: true,
                success: function (data) {
                    if (data.status == 'success') {
                        $('#pwd-content').html('<div>\n' +
                                '            <img src="{% static 'images/forget-suc.png' %}" alt="">\n' +
                                '            <p style="margin-top: 15px;"><span style="font-size: 20px;font-weight: bold;">密码设置成功</span></p>\n' +
                                '            <p style="margin-top: 5px;"><span style="font-size: 15px;"><span style="color: #ef4300">5</span>秒后自动跳转到Python实战派首页</span>\n' +
                                '            </p>\n' +
                                '            <a href="{% url 'index' %}" target="_blank">\n' +
                                '                <button type="button" id="forgetPwdBtn">返回首页</button>\n' +
                                '            </a>\n' +
                                '        </div>');
                        setTimeout(function () {

                            window.location.href="{% url 'index' %}";

                        }, 5000);
                        //$('#pwd-content').html('');
                        //window.location.href="http://www.baidu.com";
                    } else if (data.status == 'fail') {
                        alert("提交错误");
                    }
                }
            })
        })
    })
</script>

</body>

</html>

